import React, {FC} from 'react';
import "./index.less";
import img_banner from "@/assets/img/img_banner.png"
import {useRequest} from "ahooks";
import * as API from "@/services";
import {Carousel} from "antd";
import useNewsAnalyze from "@/pages/NewsPage/commons/useNewsAnalyze";
import {Link} from "@@/exports";


interface AdNewsItemProps {
  news: API.FrontNews;
}

const AdNewsItem: FC<AdNewsItemProps> = (props) => {
  const {news: item} = props;
  const {linkUrl} = useNewsAnalyze(item);
  return (
    <Link to={linkUrl} className={"ad-news-title"} target="_blank">
      <img src={item.img}/>
    </Link>
  );
};


interface AdBannerProps {
}

const AdBanner: FC<AdBannerProps> = (props) => {
  const dataReq = useRequest(() => API.queryFrontNewss({
    pageSize: 3,
    types: "AD_CAROUSEL",
  }), {refreshDeps: []});
  const data = dataReq.data?.data;
  if (dataReq.data?.total === 0) {
    return null;
  }
  return (
    <a className={"ad-banner"}>
      <Carousel autoplay>
        {
          data?.map((item, index) => {
            return (
              <AdNewsItem news={item}/>
            )
          })
        }
      </Carousel>
    </a>
  );
};

export default AdBanner;
